<template>
    <div class="sys-info-notice">
        <h4 class="header">系统消息详情</h4>
        <div class="content">
            <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item v-for="info in infoList" :name="info.name" :key="info.name">
                    <template slot="title">
                        <span class="title">系统消息内容</span><span class="date">{{info.date}}</span>
                    </template>
                    <div class="article">
                        <h4 class="header">{{info.header}}</h4>
                        <div class="detail">{{info.content}}</div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <Pagination class="sysInfo-pagination" ref="sysInfoPagination" :currentPage="sysInfoCurrentPage"
                    :pageSize="sysInfoPageSize" :pageSizes="sysInfoPageSizes" :total="sysInfoTableTotal"
                    @sizeChangeEvent="sysInfoSizeChange" @currentChangeEvent="sysInfoCurrentChange"></Pagination>
    </div>
</template>

<script>
    import Pagination from "@/components/Pagination.component"

    export default {
        name: "SysInfoNotice",
        components: {Pagination},
        data() {
            return {
                infoList: [{
                    name: '1',
                    date: '2019-09-09',
                    header: '【版本更新】书链管理后台1.3版',
                    content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；\n页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。'
                }, {
                    name: '2',
                    date: '2019-09-09',
                    header: '【版本更新】书链管理后台1.3版',
                    content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；\n页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。'
                }, {
                    name: '3',
                    date: '2019-09-09',
                    header: '【版本更新】书链管理后台1.3版',
                    content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；\n页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。'
                }, {
                    name: '4',
                    date: '2019-09-09',
                    header: '【版本更新】书链管理后台1.3版',
                    content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；\n页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。'
                }, {
                    name: '5',
                    date: '2019-09-09',
                    header: '【版本更新】书链管理后台1.3版',
                    content: '控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；\n页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。'
                }],
                sysInfoCurrentPage: 1,
                sysInfoPageSize: 100,
                sysInfoPageSizes: [100, 200, 300, 400],
                sysInfoTableTotal: 400
            }
        },
        computed: {
            activeNames() {
                // 默认展开最近一次
                return this.infoList.map(info => info.name).splice(0, 1);
            }
        },
        methods: {
            handleChange(val) {
                console.log(val);
            },
            sysInfoSizeChange(val) {
                val && (this.sysInfoPageSize = val);
                console.log(`每页 ${val} 条`);
            },
            sysInfoCurrentChange(val) {
                val && (this.sysInfoCurrentPage = val);
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="scss">
    @import "src/common/common.style";
    .sys-info-notice {
        background-color: #ffffff;
        width: 100%;
        height: 100%;
        .header {
            text-align: center;
        }
        .content {
            margin: 0 20px;
            height: calc(100% - 100px);
            @include ofy-a();
            .el-collapse {
                .el-collapse-item {
                    .el-collapse-item__header {
                        padding-left: 10px;
                        &.is-active {
                            border-bottom: 1px dashed #ddd;
                        }
                    }
                }
            }
            .title {
                font-weight: 600;
            }
            .date {
                color: #f5695c;
                margin-left: 10px;
            }
            .article {
                .detail {
                    text-align: left;
                    padding-left: 50px;
                }
            }
        }
    }
</style>